<template>
  <div class="side-l flex-v">
    <div class="glb">
      <div class="auto-flex cy">
        <span class="f16">
          <i class="glyphicon glyphicon-send"></i>
          <strong>连接管理</strong>
        </span>
      </div>
      <div>
        <OpenFile></OpenFile>
        <button class="btn btn-sm btn-primary">
          <i class="glyphicon glyphicon-cog"></i>
        </button>
        <button class="btn btn-sm btn-warning">
          <i class="glyphicon glyphicon-question-sign"></i>
        </button>
      </div>
    </div>
    <div class="auto-flex db-table">
      <div class="flex-v">
        <div class="glb">
          <div class="auto-flex">
            <i class="glyphicon glyphicon-hdd"></i>
            <strong>数据库</strong>
          </div>
          <div>
            <i class="glyphicon glyphicon-import"></i>
            <i class="glyphicon glyphicon-export"></i>
            <i class="glyphicon glyphicon-plus"></i>
          </div>
        </div>
        <div class="auto-flex">
          <NoData v-if="!db.list.length" :isLoading="db.isLoading"></NoData>
          <ul class="list-db-table">
            <li
              v-for="(v, idx) in db.list"
              :key="idx"
              :class="{ on: v.name === curDB }"
              @contextmenu="$root.copy(v.name)"
              @click="$root.setRouter({
                curDB: v.name,
              })"
            >
              <SmartToolTip :content="v.name" :maxLen="26"></SmartToolTip>
            </li>
          </ul>
        </div>
        <div class="glb p">
          <div class="auto-flex">
            <i class="glyphicon glyphicon-play"></i>
            <span>执行SQL (alt + r)</span>
          </div>
        </div>
        <div class="glb p">
          <div class="auto-flex">
            <i class="bi-github icon-mr"></i>
            <span>GitHub</span>
          </div>
        </div>
      </div>
      <div class="flex-v">
        <div class="glb">
          <div class="auto-flex">
            <i class="bi-table"></i>
            <strong>数据表</strong>
          </div>
          <div>
            <i class="glyphicon glyphicon-import"></i>
            <i class="glyphicon glyphicon-export"></i>
            <i class="glyphicon glyphicon-plus"></i>
          </div>
        </div>
        <div class="auto-flex">
          <NoData v-if="!table.list.length" :isLoading="table.isLoading"></NoData>
          <ul class="list-db-table">
            <li
              v-for="(v, idx) in table.list"
              :key="idx"
              :class="{ on: v.name === curTable }"
              @contextmenu="$root.copy(v.name)"
              @click="$root.setRouter({
                curDB: r.curDB,
                curTable: v.name,
              })"
            >
              <SmartToolTip :content="v.name" :maxLen="26"></SmartToolTip>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="glb">
      <div class="auto-flex">
        <span>技术支持：</span>
        <a href="https://codding.cn" target="_blank" class="text-primary">https://codding.cn</a>
      </div>
      <div>
        <a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=XRAaQM9Dh4NcpPlm3ILx1TI88S_pssb5&amp;jump_from=webapi">
          <img border="0" src="//pub.idqqimg.com/wpa/images/group.png" alt="KatusAdmin | 官方群" title="KatusAdmin | 官方群">
        </a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  computed: {
    r() {
      return this.$root.router
    },
    db() {
      return this.$parent.db
    },
    table() {
      return this.$parent.table
    },
    curDB() {
      return this.$parent.curDB
    },
    curTable() {
      return this.$parent.curTable
    },
  },
  watch: {},
  methods: {},
  async mounted() {}
}
</script>

<style lang="less" scoped>
.side-l {
  background: var(--bg-color);
  user-select: none;
  border-right: 1px solid var(--border-color);
  .db-table {
    overflow: hidden;
    display: flex;
    & > div:not(:first-child) {border-left: 1px solid #ddd;}
    & > div:not(:last-child) {border-right: 1px solid #fff;}
    & > .flex-v {
      & > .auto-flex {
        border-top: 1px solid #fff;
        .list-db-table {
          padding: .6em 0;
          & > li {
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
            padding: .5em 1em; cursor: pointer;
            &.on {background: rgba(0, 0, 0, .1);}
          }
        }
      }
    }
  }
}
</style>